<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>炫彩消消乐</title>
<style>
body {
margin: 0;
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
background: radial-gradient(circle, #e0eafc, #cfdef3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
padding: 20px;
}

h1 {
margin: 10px;
font-size: 32px;
background: linear-gradient(to right, #00c6ff, #0072ff);
-webkit-background-clip: text;
color: transparent;
}

#score {
font-size: 20px;
color: #333;
margin-bottom: 10px;
font-weight: bold;
}

#game-board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 5px;
padding: 10px;
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.cell {
width: 50px;
height: 50px;
border-radius: 10px;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
position: relative;
}

.cell:hover {
transform: scale(1.05);
}

.selected {
outline: 3px solid #222;
transform: scale(1.1);
}

.red { background: linear-gradient(145deg, #f44336, #ff7961); }
.green { background: linear-gradient(145deg, #4caf50, #81c784); }
.blue { background: linear-gradient(145deg, #2196f3, #64b5f6); }
.yellow { background: linear-gradient(145deg, #ffeb3b, #fff176); }
.purple { background: linear-gradient(145deg, #9c27b0, #ba68c8); }
.empty {
background-color: transparent;
box-shadow: none;
}

.fade {
animation: fadeOut 0.4s forwards;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: scale(0.3);
}
}

</style>
</head>
<body>
<h1>炫彩消消乐</h1>
<div id="score">得分：0</div>
<div id="game-board"></div>

<script>
(function () {
var colors = ['red', 'green', 'blue', 'yellow', 'purple'];
var board = [], rows = 8, cols = 8;
var selected = null, score = 0;

function initBoard() {
var container = document.getElementById('game-board');
container.innerHTML = '';
for (var i = 0; i < rows; i++) {
board[i] = [];
for (var j = 0; j < cols; j++) {
var cell = createCell(i, j, randomColor());
board[i][j] = cell;
container.appendChild(cell);
}
}
}

function createCell(i, j, color) {
var cell = document.createElement('div');
cell.className = 'cell ' + color;
cell.setAttribute('data-row', i);
cell.setAttribute('data-col', j);
cell.onclick = handleClick;
return cell;
}

function randomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}

function handleClick(e) {
var cell = e.target;
var row = parseInt(cell.getAttribute('data-row'));
var col = parseInt(cell.getAttribute('data-col'));

if (selected) {
unselectAll();
var dRow = Math.abs(selected.row - row);
var dCol = Math.abs(selected.col - col);
if ((dRow === 1 && dCol === 0) || (dRow === 0 && dCol === 1)) {
swapCells(selected.row, selected.col, row, col);
if (checkMatches().length > 0) {
setTimeout(function () {
resolveBoard();
}, 300);
} else {
setTimeout(function () {
swapCells(selected.row, selected.col, row, col);
}, 300);
}
}
selected = null;
} else {
selected = { row: row, col: col };
cell.classList.add("selected");
}
}

function swapCells(r1, c1, r2, c2) {
var temp = board[r1][c1].className;
board[r1][c1].className = board[r2][c2].className;
board[r2][c2].className = temp;
}

function unselectAll() {
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
board[i][j].classList.remove("selected");
}
}
}

function checkMatches() {
var matches = [];
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols - 2; j++) {
var c1 = board[i][j].className;
var c2 = board[i][j+1].className;
var c3 = board[i][j+2].className;
if (c1 === c2 && c2 === c3 && !c1.includes('empty')) {
matches.push([i,j],[i,j+1],[i,j+2]);
}
}
}
for (var j = 0; j < cols; j++) {
for (var i = 0; i < rows - 2; i++) {
var c1 = board[i][j].className;
var c2 = board[i+1][j].className;
var c3 = board[i+2][j].className;
if (c1 === c2 && c2 === c3 && !c1.includes('empty')) {
matches.push([i,j],[i+1,j],[i+2,j]);
}
}
}
return matches;
}

function resolveBoard() {
var matches = checkMatches();
if (matches.length === 0) return;

var unique = {};
for (var k = 0; k < matches.length; k++) {
var key = matches[k][0] + "-" + matches[k][1];
unique[key] = true;
}

var count = 0;
for (var key in unique) {
var parts = key.split("-");
var i = parseInt(parts[0]);
var j = parseInt(parts[1]);
board[i][j].classList.add('fade');
board[i][j].className = 'cell empty';
count++;
}

score += count * 10;
document.getElementById('score').textContent = '得分：' + score;

setTimeout(function () {
dropCells();
refillBoard();
setTimeout(resolveBoard, 200);
}, 300);
}

function dropCells() {
for (var j = 0; j < cols; j++) {
for (var i = rows - 1; i >= 0; i--) {
if (board[i][j].className.includes('empty')) {
for (var k = i - 1; k >= 0; k--) {
if (!board[k][j].className.includes('empty')) {
board[i][j].className = board[k][j].className;
board[k][j].className = 'cell empty';
break;
}
}
}
}
}
}

function refillBoard() {
for (var i = 0; i < rows; i++) {
for (var j = 0; j < cols; j++) {
if (board[i][j].className.includes('empty')) {
board[i][j].className = 'cell ' + randomColor();
}
}
}
}

initBoard();
})();
</script>
</body>
</html>